<!-- 表单视图：基础校验与提交 -->
<template>
  <div>
    <h2>表单示例</h2>
    <el-form @submit.native.prevent="onSubmit" label-width="80px">
      <el-form-item label="名称" :error="errors.name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="年龄" :error="errors.age">
        <el-input-number v-model="form.age" :min="0" />
      </el-form-item>
      <el-form-item label="邮箱" :error="errors.email">
        <el-input v-model="form.email" type="email" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
    <el-alert v-if="result" :title="`提交成功：${pretty(result)}`" type="success" show-icon />
  </div>
  
</template>

<script>
import { post } from '../api/http'
export default {
  name: 'FormDemoPage',
  data() { return { form: { name: '', age: null, email: '' }, errors: {}, result: null } },
  methods: {
    validate() {
      const e = {}
      if (!this.form.name) e.name = '名称为必填项'
      if (this.form.age == null || this.form.age < 0) e.age = '年龄需为非负数'
      if (this.form.email && !/.+@.+\..+/.test(this.form.email)) e.email = '邮箱格式不正确'
      this.errors = e; return Object.keys(e).length === 0
    },
    async onSubmit() { if (!this.validate()) return; try { const res = await post('/form/submit', this.form); this.result = res } catch (e) { /* ignore handled globally */ } },
    pretty(v) { return JSON.stringify(v) }
  }
}
</script>

<style>
.error { color:#c00; margin-left:8px }
.ok { margin-top:12px; color:#2e7d32 }
</style>
